<!--
 * @Author: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @Date: 2022-09-21 09:22:49
 * @LastEditors: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @LastEditTime: 2022-10-07 16:40:22
 * @FilePath: \客户端\app\src\views\HomeView.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="common-layout">
    <el-container class="app">
      <div class="header-nav" :class="`${navShow ? 'header-nav' : 'navOff'}`">
        <div class="header-box">
          <div>
            <img
              src="https://bwcreation.oss-cn-beijing.aliyuncs.com/2022-09-05/001.gif"
              alt=""
            />
          </div>

          <div class="link-box">
            <div class="first-link">
              <router-link to="/layout/article">{{
                $t("header.passage")
              }}</router-link>
              <router-link to="/layout/archives">{{
                $t("header.archives")
              }}</router-link>
              <router-link to="/layout/knowledgeBooks">{{
                $t("header.knowledge")
              }}</router-link>
                <router-link to="/layout/message">留言板</router-link>
                <router-link to="/layout/socket">聊天室</router-link>

            </div>
          
          </div>

          <div class="icon-item">
            <div>
              <el-dropdown>
                <span class="el-dropdown-link">
                  <svg
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    width="1em"
                    height="1em"
                  >
                    <path
                      d="M547.797333 638.208l-104.405333-103.168 1.237333-1.28a720.170667 720.170667 0 0 0 152.490667-268.373333h120.448V183.082667h-287.744V100.906667H347.605333v82.218666H59.818667V265.386667h459.178666a648.234667 648.234667 0 0 1-130.304 219.946666 643.242667 643.242667 0 0 1-94.976-137.728H211.541333a722.048 722.048 0 0 0 122.453334 187.434667l-209.194667 206.378667 58.368 58.368 205.525333-205.525334 127.872 127.829334 31.232-83.84m231.424-208.426667h-82.218666l-184.96 493.312h82.218666l46.037334-123.306667h195.242666l46.464 123.306667h82.218667l-185.002667-493.312m-107.690666 287.744l66.56-178.005333 66.602666 178.005333z"
                      fill="currentColor"
                    ></path>
                  </svg>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="changeMode1i8n('zh')"
                      >zh</el-dropdown-item
                    >
                    <el-dropdown-item @click="changeMode1i8n('en')"
                      >en</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
            <div class="daily" @click="changeMode">
              <span :class="stylespan"></span>
              <span :class="stylespans"></span>
              <small :class="samllLien"></small>
              <small :class="samllLien"></small>
              <small :class="samllLien"></small>
              <small :class="samllLien"></small>
              <small :class="samllLien"></small>
              <small :class="samllLien"></small>
            </div>
            <div>
              <svg
                viewBox="64 64 896 896"
                focusable="false"
                data-icon="search"
                width="1em"
                height="1em"
                fill="currentColor"
                aria-hidden="true"
                @click="$router.push('/search')"
              >
                <path
                  d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
                ></path>
              </svg>
            </div>
          </div>
          <div class="icon-item2" @click="showPopup">
            <el-icon color="red"><Fold /></el-icon>
          </div>
        </div>

        <!-- <van-cell is-link @click="showPopup"  >展示弹出层</van-cell> -->
        <van-popup
          v-model:show="show"
          position="top"
          :style="{ height: '20%', marginTop: '50px' }"
          class="popup"
          style="height: 250px"
        >
          <div class="router-item">
            <div class="router-links">
              <p>
                <router-link to="/layout/article" @click="close">{{
                  $t("header.passage")
                }}</router-link>
              </p>
              <p>
                <router-link to="/layout/archives" @click="close">{{
                  $t("header.archives")
                }}</router-link>
              </p>
              <p>
                <router-link to="/layout/knowledgeBooks" @click="close">{{
                  $t("header.knowledge")
                }}</router-link>
              </p>
               <p>
              <router-link to="/layout/message">留言板</router-link>
            </p>
            </div>
           
          </div>
          <div class="icon-item">
            <div>
              <el-dropdown>
                <span class="el-dropdown-link">
                  <svg
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    width="1em"
                    height="1em"
                  >
                    <path
                      d="M547.797333 638.208l-104.405333-103.168 1.237333-1.28a720.170667 720.170667 0 0 0 152.490667-268.373333h120.448V183.082667h-287.744V100.906667H347.605333v82.218666H59.818667V265.386667h459.178666a648.234667 648.234667 0 0 1-130.304 219.946666 643.242667 643.242667 0 0 1-94.976-137.728H211.541333a722.048 722.048 0 0 0 122.453334 187.434667l-209.194667 206.378667 58.368 58.368 205.525333-205.525334 127.872 127.829334 31.232-83.84m231.424-208.426667h-82.218666l-184.96 493.312h82.218666l46.037334-123.306667h195.242666l46.464 123.306667h82.218667l-185.002667-493.312m-107.690666 287.744l66.56-178.005333 66.602666 178.005333z"
                      fill="currentColor"
                    ></path>
                  </svg>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="changeMode1i8n('zh')"
                      >zh</el-dropdown-item
                    >
                    <el-dropdown-item @click="changeMode1i8n('en')"
                      >en</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
            <div class="daily" @click="changeMode">
              <span :class="stylespan"></span>
              <span :class="stylespans"></span>
              <small :class="samllLien"></small>
              <small :class="samllLien"></small>
              <small :class="samllLien"></small>
              <small :class="samllLien"></small>
              <small :class="samllLien"></small>
              <small :class="samllLien"></small>
            </div>

            <svg
              viewBox="64 64 896 896"
              focusable="false"
              data-icon="search"
              width="1em"
              height="1em"
              fill="currentColor"
              aria-hidden="true"
             
            >
              <path
               @click="handSearch"
                d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
              ></path>
            </svg>
          </div>
        </van-popup>
      </div>

      <el-scrollbar>
        <el-main class="main" id="main" >
          <router-view></router-view>

          <div class="hello_world">
          <button class="top" @click="toTop">
            <svg
              viewBox="64 64 896 896"
              focusable="false"
              data-icon="vertical-align-top"
              width="1em"
              height="1em"
              fill="currentColor"
              aria-hidden="true"
            >
              <path
                d="M859.9 168H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zM518.3 355a8 8 0 00-12.6 0l-112 141.7a7.98 7.98 0 006.3 12.9h73.9V848c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V509.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 355z"
              ></path>
            </svg>
          </button>
        </div>
        </el-main>
      </el-scrollbar>
      <el-footer class="footer">
        <p>
          <path
            d="M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0z m-182.4 768C288 768 256 736 256 694.4s32-73.6 73.6-73.6 73.6 32 73.6 73.6-32 73.6-73.6 73.6z m185.6 0c0-144-115.2-259.2-259.2-259.2v-80c185.6 0 339.2 150.4 339.2 339.2h-80z m172.8 0c0-240-195.2-432-432-432V256c281.6 0 512 230.4 512 512h-80z"
            fill="currentColor"
          ></path>
          <li>
            <a
              href="https://github.com/fantasticit/wipi"
              target="_blank"
              rel="noreferrer"
              ><span
                role="img"
                aria-label="github"
                class="anticon anticon-github"
                ><svg
                  viewBox="64 64 896 896"
                  focusable="false"
                  data-icon="github"
                  width="1em"
                  height="1em"
                  fill="currentColor"
                  aria-hidden="true"
                >
                  <path
                    d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9a127.5 127.5 0 0138.1 91v112.5c.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z"
                  ></path></svg></span
            ></a>
          </li>
        </p>
        <p>十几年的</p>
      </el-footer>
      


    </el-container>
  </div>
</template>
<script>
import { Fold } from "@element-plus/icons-vue";
export default {
  components: {
    Fold,
  },
  data() {
    return {
      stylespan: "daily_item_span",
      stylespans: "daily_item_spans",
      samllLien: "samll_lien",
      ishsow: false,
      show: false,
      flag_scroll: false,
      isShow: false,

    };
  },
  mounted(){
   window.addEventListener("scroll", this.scrollToTop); //获取距离顶部距离

        },
destroyed() {
    window.removeEventListener("scroll", this.scrollToTop); //销毁距离（不然会报错）
  },

  methods: {
      
   toTop() {
      document.documentElement.scrollTop = 0;
     document.getElementById('main').scrollIntoView();

    },

    scrollToTop() {
      var scrollTop = //距离顶部的距离
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
        console.log(scrollTop)
      if (scrollTop > 10) {
        // 大于300显示隐藏
        this.isShow = true;
      } else {
        this.isShow = false;
      }
    },



    changeMode() {
      this.ishsow = !this.ishsow;
      if (this.ishsow) {
        this.stylespan = "daily_item_span dark_item_span";
        this.stylespans = "daily_item_spans dark_item_spans";
        this.samllLien = "samll_lien dark_samll";
        document.getElementsByTagName("body")[0].className = "night-mode-style";
      } else {
        this.stylespan = "daily_item_span";
        this.stylespans = "daily_item_spans";
        this.samllLien = "samll_lien";
        document.getElementsByTagName("body")[0].className = "mode-style";
      }
    },
    showPopup() {
      this.show = true;
    },
    close() {
      this.show = false;
    },
    // 切换中英文
    changeMode1i8n(value) {
      this.$i18n.locale = value;
    },
  },
};
</script>

<style lang="scss">
* {
  padding: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
   span::-moz-selection {
    background: #ff0064;
    color: #fff;
  }
  span::selection {
    background: #ff0064;
    color: #fff;
  }
}

svg:hover {
  cursor: pointer;
}

.common-layout {
  width: 100vw;
  height: 100vh;
}
.app {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

}
 

body,
html {
  width: 100%;
  height: 100%;
}
.router-link-active {
  color: red;
}

.top {
  position: fixed;
  width: 40px;
  height: 40px;
  bottom: 50px;
  right: 100px;
  background-color: #000;
  font-size: 24px;
  line-height: 40px;
  border-radius: 50%;
  color: #fff;
  text-align: center;
}

// **************************全屏*****************//
@media screen and (min-width: 1200px) {
  // 头部样式
  .header-nav {
    // width: 100%;
    // display: flex;
    // align-items: center;
    // justify-content: space-around;
    // position: fixed;
  top: 0;
  left: 0;
  right: 0;
  // transition: all 0.2s ease-in-out 0.2s;
  // transform: translateZ(0);
  transition: all .2s;
  transform: translateZ(0);
  width: 100%;
  height: 50px;
  background: #fff;
  opacity: 1;
  z-index: 999;
    .header-box {
      width: 80%;
      display: flex;
      margin-right: auto;
      margin-left: auto;
      img {
        width: 60px;
      }
      // router-link的盒子
      .link-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: 1;

        .first-link {
          // padding: 10px;
          width: 300px;
          display: flex;
          justify-content: space-between;
        }
      }

      .icon-item {
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding: 10px;
        width: 170px;
      }

      .icon-item2 {
        display: none;
      }
      .routers-box {
        display: none;
      }
    }
  }
  .main {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    flex: 1;
    overflow: auto;
  }
  .footer {
    height: 50px;
    display: flex;
    align-items: center;
    margin-left: 50%;
  }
}
// **************************中间*****************//
@media screen and (min-width: 870px) and (max-width: 1200px) {
  // 头部样式
  .header-nav {
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .header-box {
      width: 70%;
      display: flex;
      margin-right: auto;
      margin-left: auto;
      img {
        width: 60px;
      }
      // router-link的盒子
      .link-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px;
        flex: 1;
        //
        .first-link {
          // padding: 10px;

          width: 250px;
          display: flex;
          justify-content: space-between;
        }
      }
      // 右侧图标
      .icon-item {
        display: flex;
        padding: 10px;
        width: 80px;
        align-items: center;
        justify-content: space-around;
        // flex-direction: column;
      }

      .icon-item2 {
        display: none;
      }
      .routers-box {
        display: none;
      }
    }
  }

  .main {
    width: 100%;
    height: 100%;
    margin: 0 auto;
  }
  .footer {
    height: 50px;
    display: flex;
    align-items: center;
    margin-left: 50%;
  }
}
// **************************移动端*****************//
@media screen and (min-width: 20px) and (max-width: 870px) {
  // 头部样式
  .header-nav {
    width: 100vw;
    min-height: 50px;
    flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .header-box {
      width: 95%;
      display: flex;
      margin-right: auto;
      margin-left: auto;
      justify-content: space-between;
      align-items: center;
      img {
        width: 60px;
        margin-left: 40px;
      }
      // router-link的盒子
      .link-box {
        display: none;
        align-items: center;
        justify-content: space-between;
        padding: 10px;
        flex: 1;
        //
        .first-link {
          // padding: 10px;
          width: 200px;
          display: flex;
          justify-content: space-between;
        }
      }
      .popup {
        display: flex;
        flex-direction: column;

        // .router-item{
        //   display: flex;
        //   flex-direction: column;

        //   .router-links{
        //     display: flex;
        //     flex-direction: column;
        //   }
        // }
      }
      // 右侧图标
      .icon-item {
        display: none;
      }
      .icon-item2 {
        display: block;
        .icon-item {
          display: flex;
          flex-direction: column;
          justify-content: center;
        }
        .daily {
          margin-left: 128px;
          width: 100px;
        }
        // margin-right: 40%;
      }
    }
    //
  }
  .main {
    width: 100%;
    height: 100%;
    margin: 0 auto;
  }
  .footer {
    height: 50px;
    display: flex;
    align-items: center;
    margin-left: 50%;
  }
}
// 太阳 月亮
.daily {
  position: relative;
  height: 24px;
  width: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  &:hover {
    .samll_lien:nth-child(3) {
      transform: rotate(calc(3 * calc(1turn / 12)) - 20deg);
    }
    .samll_lien:nth-child(4) {
      transform: rotate(calc(4 * calc(1turn / 12)) - 20deg);
    }
    .samll_lien:nth-child(5) {
      transform: rotate(calc(5 * calc(1turn / 12)) - 20deg);
    }
    .samll_lien:nth-child(6) {
      transform: rotate(calc(6 * calc(1turn / 12)) - 20deg);
    }
    .samll_lien:nth-child(7) {
      transform: rotate(calc(7 * calc(1turn / 12)) - 20deg);
    }
    .samll_lien:nth-child(8) {
      transform: rotate(calc(8 * calc(1turn / 12)) - 20deg);
    }
    .dark_item_span {
      transform: scale(1) translate(20%, -40%);
    }
  }

  .daily_item_span {
    position: absolute;
    border-radius: 50%;
    top: 0;
    right: 0;
    transform: scale(0) translate(-100%, 35%);
    z-index: 9;
    transition: transform 0.4s;
    transform-origin: right;
    background: #eec413;
  }
  .daily_item_spans {
    position: relative;
    z-index: 3;
    background: #eec413;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #fff;
  }

  .dark_item_span {
    height: 28px;
    width: 28px;
    transform: scale(1) translate(35%, -35%);
    background: #171b30;
  }
  .dark_item_spans {
    position: relative;
    z-index: 3;
    background: #e684af;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #171b30;
    transform: none;
  }

  .samll_lien:nth-child(3) {
    transform: rotate(calc(3 * calc(1turn / 12)));
  }
  .samll_lien:nth-child(4) {
    transform: rotate(calc(4 * calc(1turn / 12)));
  }
  .samll_lien:nth-child(5) {
    transform: rotate(calc(5 * calc(1turn / 12)));
  }
  .samll_lien:nth-child(6) {
    transform: rotate(calc(6 * calc(1turn / 12)));
  }
  .samll_lien:nth-child(7) {
    transform: rotate(calc(7 * calc(1turn / 12)));
  }
  .samll_lien:nth-child(8) {
    transform: rotate(calc(8 * calc(1turn / 12)));
  }
  .samll_lien {
    width: 2px;
    background: #eec413;
    display: block;
    height: 125%;
    position: absolute;
    z-index: 2;
    transition: all 0.4s, height 0.3s ease-in-out;
  }
  .dark_samll {
    height: 0;
    transition: 0.4s, transform 0.4s, height 0.2s 0.1s;
  }
}
</style>
